<template>
  <div class="kong">
    <el-dialog
      v-model="cardReplacementVisible"
      title="补卡"
      width="40%"
      :close-on-click-modal="false"
      :before-close="handleClose"
      center
    >
      <div>
        <el-form-item label="打卡时间" prop="clockTime">
          <el-date-picker
            type="date"
            placeholder="输入打卡时间"
            v-model="clockTime"
            @change="changeTime"
          />
        </el-form-item>
        <el-form-item label="使用时间" prop="useageHour">
          <el-input-number v-model="useageHour" :min="0" :max="100" />
          h
        </el-form-item>
        <el-form-item label="成果上传" prop="uploadFile">
          <el-upload
            ref="cardReplacementRef"
            class="uploadItem"
            drag
            accept=".pdf,.doc,.docx,.png,.jpg,.txt,.md,.xlsx"
            :file-list="fileList"
            :on-remove="handleRemove"
            :on-change="onChange"
            :show-file-list="true"
            action="http://localhost:8991/jiai/clock/clockIn"
            :limit="10"
            :auto-upload="false"
            :data="uploadReq"
            append-to-body
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <template #tip>
              <div class="el-upload__tip">
                支持.pdf,.doc,.docx,.png,.jpg,.txt,.md,.xlsx
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="打卡备注" prop="remark">
          <el-input v-model="remark" placeholder="请输入打卡备注" />
        </el-form-item>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="submitAddIt()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <DataUpload :dataUploadVisible="dataUploadVisible" @exportData="exportData">
  </DataUpload>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, onMounted } from 'vue'
import { ElMessage, UploadInstance } from 'element-plus'
import { dataupload } from '@/components/util/dataupload'
import { clockIn, getTodayClockIn } from '@/api/clockIn'

let clockTime = ref<Date>(new Date())
let useageHour = ref<number>(0)
let remark = ref<string>('')

const dataUploadVisible = ref<boolean>(false)

const required = (message?: string) => {
  return {
    required: true,
    message: message,
    trigger: 'blur',
  }
}

let fileList = ref<any[]>([])

//文件移除配置方法
const handleRemove = (file: any, files: never[]) => {
  fileList.value = files
}

const onChange = (file: any, files: never[]) => {
  fileList.value = files
}

const changeTime = (val: Date) => {
  uploadReq.clockTime = val
}

const uploadReq: dataupload = reactive<dataupload>({
  mkdir: '/default/file',
  clockTime: clockTime.value,
  scheduleId: '0',
  useageHour: useageHour.value,
  remark: remark.value,
  clockType: 2,
})

const resetFields = () => {
  fileList.value = []
  clockTime.value = new Date()
  remark.value = ''
  useageHour.value = 0
  uploadReq.clockTime = clockTime.value
  uploadReq.useageHour = useageHour.value
  uploadReq.remark = remark.value
  uploadReq.clockType = 2
}

const cancel = () => {
  changeStatus(false)
  resetFields()
}

const handleClose = (done: () => void) => {
  changeStatus(false)
  resetFields()
  done()
}

interface Props {
  cardReplacementVisible?: Boolean
}

// 初始化查询
onMounted(() => {
  query()
})

const query = () => {
  getTodayClockIn(uploadReq.scheduleId).then((res: any) => {
    if (res.data) {
      clockTime.value = res.data.clockTime
      useageHour.value = res.data.useageHour
      remark.value = res.data.remark
    }
  })
}

const clockInRef = ref<UploadInstance>()

const myProps = defineProps<Props>()

const { cardReplacementVisible } = toRefs(myProps)

const emit = defineEmits(['getCardReplacementConfig'])

const changeStatus = (status: boolean) => {
  resetFields()
  emit('getCardReplacementConfig', status)
}

const exportData = (status: boolean) => {
  console.log('导出数据')
  dataUploadVisible.value = status
}

const submitAddIt = () => {
  uploadReq.useageHour = useageHour.value
  uploadReq.remark = remark.value
  if (fileList.value.length === 0) {
    clockIn(uploadReq).then((res: any) => {
      if (res.data) {
        ElMessage.success('打卡成功')
        changeStatus(!cardReplacementVisible)
      } else {
        ElMessage.error('打卡失败')
      }
    })
  } else {
    clockInRef.value!.submit()
    ElMessage.success('打卡成功')
    changeStatus(!cardReplacementVisible)
  }
  resetFields()
}

const initsObj = (rows: any) => {
  if (rows) {
    uploadReq.scheduleId = rows.id
    query()
  }
}

defineExpose({
  initsObj,
})
</script>

<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
